<template>
  <div>
    <el-row>
      <el-col :span="2">&emsp;</el-col>
      <el-col :span="18"
        ><el-card
          class="box-card"
          v-for="(item, index) in questionsAndAnswers"
          :key="index"
        >
          <el-descriptions :title="item.question">
            <el-descriptions-item label="答：">{{
              item.answer
            }}</el-descriptions-item>
          </el-descriptions>
        </el-card></el-col
      >
      <el-col :span="4">
        <el-button type="primary" round @click="showDialog">点击提问</el-button>
      </el-col>

      <el-dialog title="提问" :visible.sync="showModal">
        <el-input v-model="inputValue" placeholder="请输入您的问题"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showModal = false">取 消</el-button>
          <el-button type="primary" @click="submitQuestion">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>



<script>
export default {
  data() {
    return {
      questionsAndAnswers: [],
      showModal: false,
      inputValue: "",
    };
  },
  methods: {
    loadList() {
      this.$axios.post("question/answer").then((res) => {
        this.questionsAndAnswers = res.data.data.questionList;
      });
    },
    showDialog() {
      this.showModal = true;
    },
    submitQuestion() {
      // 在这里添加提交问题的代码
      this.showModal = false;
    },
  },
  mounted() {
    this.loadList();
  },
};
</script>

<style>
. {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>




